<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发电预测可视化系统</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.min.css">
</head>

<body>
    <div class="head clearfix">


        <h1 class="pulll_left">发电预测可视化系统</h1>
        <div class="menu menu2 pulll_left">
            <ul>
                <li><a href="index.html">首页总览</a></li>
                <li><a href="index1.html">光伏发电</a></li>
                <li class="this"><a href="#" class="this">水利发电</a></li>
                <li><a href="index3.html">环境监测</a></li>
                <li><a href="index4.html">人员概况</a></li>
                <!--  <li><a href="#">标题样式</a></li> -->


            </ul>
        </div>
        <div id="last1" style="right: 25%;background-color: #022572;">建议生成器</div>
        <div class="rili1" style="right: 22%;height: 150px;">
            <div class="sanjiao1" style="top: -12%;">
            </div>
            <ul>
                <li style="position: relative;"><input type="text" placeholder="请输入相关问题" class="inp">
                    <div class="sencheng">
                        生成
                    </div>
                </li>
                <li>
                    <input type="text" class="inp active" disabled>
                </li>
            </ul>
            <div class="guanbi">
                ×
            </div>
        </div>
        <div class="shi"><span class="riqi"></span><br>
            <span class="shijian">12:21:16</span>
        </div>
        <div id="last">更换监测日期</div>
        <div class="rili">
            <div class="sanjiao">
            </div>
            <div class="sanjiaoxia">
            </div>
            <ul>
                <li>日</li>
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li>六</li>
                <li></li>
                <li class="li1">1</li>
                <li class="li1">2</li>
                <li class="li1">3</li>
                <li class="li1">4</li>
                <li class="li1">5</li>
                <li class="li1">6</li>
                <li class="li1">7</li>
                <li class="li1">8</li>
                <li class="li1">9</li>
                <li class="li1">10</li>
                <li class="li1">11</li>
                <li class="li1">12</li>
                <li class="li1">13</li>
                <li class="li1">14</li>
                <li class="li1">15</li>
                <li class="li1">16</li>
                <li class="li1">17</li>
                <li class="li1">18</li>
                <li class="li1">19</li>
                <li class="li1">20</li>
                <li class="li1">21</li>
                <li class="li1">22</li>
                <li class="li1">23</li>
                <li class="li1">24</li>
                <li class="li1">25</li>
                <li class="li1">26</li>
                <li class="li1">27</li>
                <li class="li1">28</li>
                <li class="li1">29</li>
                <li class="li1">30</li>
            </ul>
        </div>
    </div>
    <div class="left">
        <div class="left1">
            <div class="fadian">
                水利发电功率预测
            </div>
            <div class="zexian1">

            </div>
        </div>
        <div class="left1">
            <div class="fadian">
                发电功率比较
            </div>
            <div class="zexian5">

            </div>
        </div>
        <div class="left1">
            <div class="fadian">
                水利发电影响因素
            </div>
            <div class="zexian3">

            </div>
        </div>
    </div>
    <div class="mid">
        <div class="mid1" style="border: none;">

        </div>
        <div class="mid2">
            <div class="midxia1">
                <div class="fadian">
                    水利近七日检测
                </div>
                <div class="zexian11">

                </div>
            </div>
            <div class="midxia2">
                <div class="fadian">
                    水利近七日总量
                </div>
                <div class="zexian22">
                </div>
            </div>
        </div>
    </div>
    <div class="left" style="margin-left: 1%;">
        <div class="right">
            <div class="sang1">
                <div>
                    水利发电详情
                </div>
            </div>
            <div class="sang2">
                <ul class="biaotou">
                    <li>发电站</li>
                    <li>预计发电</li>
                    <li>实际发电</li>
                    <li>发电功率</li>
                </ul>
                <div style="height: 374px;overflow: hidden;width: 100%;">
                    <table class="biaoxia">
                        <tr>
                            <td>白沙河电站</td>
                            <td>169</td>
                            <td>154</td>
                            <td>94%</td>
                        </tr>
                        <tr>
                            <td>禁门关电站</td>
                            <td>175</td>
                            <td>163</td>
                            <td>91%</td>
                        </tr>
                        <tr>
                            <td>胜利电站</td>
                            <td>148</td>
                            <td>134</td>
                            <td>84%</td>
                        </tr>
                        <tr>
                            <td>长河电站</td>
                            <td>79</td>
                            <td>68</td>
                            <td>89%</td>
                        </tr>
                        <tr>
                            <td>下村电站</td>
                            <td>136</td>
                            <td>129</td>
                            <td>97%</td>
                        </tr>
                        <tr>
                            <td>乐英电站</td>
                            <td>225</td>
                            <td>214</td>
                            <td>87%</td>
                        </tr>
                        <tr>
                            <td>南瓜桥电站</td>
                            <td>92</td>
                            <td>74</td>
                            <td>93%</td>
                        </tr>
                        <tr>
                            <td>洗马姑电站</td>
                            <td>75</td>
                            <td>68</td>
                            <td>91%</td>
                        </tr>
                        <tr>
                            <td>龙头石电站</td>
                            <td>167</td>
                            <td>139</td>
                            <td>88%</td>
                        </tr>
                        <tr>
                            <td>白沙河电站</td>
                            <td>169</td>
                            <td>154</td>
                            <td>94%</td>
                        </tr>
                        <tr>
                            <td>禁门关电站</td>
                            <td>175</td>
                            <td>163</td>
                            <td>91%</td>
                        </tr>
                        <tr>
                            <td>胜利电站</td>
                            <td>148</td>
                            <td>134</td>
                            <td>84%</td>
                        </tr>
                        <tr>
                            <td>长河电站</td>
                            <td>79</td>
                            <td>68</td>
                            <td>89%</td>
                        </tr>
                        <tr>
                            <td>下村电站</td>
                            <td>136</td>
                            <td>129</td>
                            <td>97%</td>
                        </tr>
                        <tr>
                            <td>乐英电站</td>
                            <td>225</td>
                            <td>214</td>
                            <td>87%</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="right1">
            <div class="fadian">
                发电情况
            </div>
            <div class="zexian4">

            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=PttOWfapivN0csW3hYjukyhmLyjD5k0x"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/bmap.min.js"></script>

<script>
    var left1 = echarts.init(document.querySelector('.zexian1'))
    var left3 = echarts.init(document.querySelector('.zexian3'))
    var sang = echarts.init(document.querySelector('.mid1'))
    var mid1 = echarts.init(document.querySelector('.zexian11'))
    var mid2 = echarts.init(document.querySelector('.zexian22'))
    var right1 = echarts.init(document.querySelector('.zexian4'))
    var right2 = echarts.init(document.querySelector('.zexian5'))
    const data1 = [1, 34, 67, 45, 62, 56, 52, 45, 12, 64, 76, 12]
    const data2 = [3, 45, 6, 26, 5, 12, 56, 2, 6, 2, 64, 78]
    const data3 = [4, 79, 73, 71, 67, 68, 108, 47, 18, 66, 140, 90]
    const data4 = [2, 39.5, 36.5, 35.5, 33.5, 34, 54, 23.5, 9, 33, 70, 45]
    const data6 = [
        ['水资源情况', 56],
        ['地理环境', 51],
        ['天气降雨量', 40],
        ['其他', 25]
    ]
    const data7 = [10, 2, 3, 11, 5, 7, 5]
    const data8 = [1, 3, 2, 5]
    const data11 = [11, 63, 24, 53, 34, 23, 34]
    const data22 = [16, 36, 32, 45]
    const data33 = [10, 46, 64, 12, 0, 56, 0]
    const data44 = [16, 36, 32, 45, 33, 26, 5]
    const data55 = [10, 26, 33, 11, 55, 71, 5]
    const data66 = [1, 13, 23, 51, 13, 24, 10]
    const data77 = [5.5, 19.5, 28, 31, 34, 47.5, 7.5]
    var data = [

        { name: '大庆', value: 279 },
        { name: '雅安市', value: 200 },
        { name: '天全胜利电站', value: 110 },
        { name: '禁门关电站', value: 110 },
        { name: '白沙河电站', value: 110 },


    ];
    var geoCoordMap = {

        大庆: [125.03, 46.58],
        雅安市: [103.04, 30.02],
        天全胜利电站: [102.81, 30.03],
        禁门关电站: [102.73, 30.08],
        白沙河电站: [102.7, 30.25],
    };
    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };
    function renderItem(params, api) {
        var coords = [

        ];
        var points = [];
        for (var i = 0; i < coords.length; i++) {
            points.push(api.coord(coords[i]));
        }
        var color = api.visual('color');
        return {
            type: 'polygon',
            shape: {
                points: echarts.graphic.clipPointsByRect(points, {
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height
                })
            },
            style: api.style({
                fill: color,
                stroke: echarts.color.lift(color)
            })
        };
    }
    option = {
        backgroundColor: 'transparent',
        title: {
            text: '雅安主要水电站情况',
            left: 'center',
            top: '2%',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        bmap: {
            center: [103, 30],
            zoom: 11,
            roam: false,
            mapStyle: {
                styleJson: [
                    {
                        featureType: 'highway',
                        elementType: 'geometry.fill',
                        stylers: {
                            color: '#000',
                            lightness: 1
                        }
                    },
                    {
                        featureType: 'highway',
                        elementType: 'geometry',
                        stylers: {
                            color: '#000'
                        }
                    },
                    {
                        featureType: 'label',
                        elementType: 'all',
                        stylers: {
                            visibility: 'off'
                        }
                    },
                    {
                        featureType: 'land',
                        elementType: 'all',
                        stylers: {
                            color: '#092649'
                        }
                    },
                    {
                        featureType: 'boundary',
                        elementType: 'geometry',
                        stylers: {
                            color: '#000'
                        }
                    },
                    {
                        featureType: 'manmade',
                        elementType: 'all',
                        stylers: {
                            visibility: 'off'
                        }
                    },

                    {
                        featureType: 'arterial',
                        elementType: 'labels',
                        stylers: {
                            visibility: 'off'
                        }
                    },
                    {
                        featureType: 'boundary',
                        elementType: 'geometry.fill',
                        stylers: {
                            color: '#000'
                        }
                    },
                    {
                        featureType: 'building',
                        elementType: 'all',
                        stylers: {
                            color: '#1a5787'
                        }
                    },
                ]
            }
        },
        series: [
            {
                name: 'pm2.5',
                type: 'scatter',
                coordinateSystem: 'bmap',
                data: convertData(data),
                encode: {
                    value: 2
                },
                symbolSize: function (val) {
                    return val[2] / 10;
                },
                label: {
                    formatter: '{b}',
                    position: 'right'
                },
                itemStyle: {
                    color: '#ddb926'
                },
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            {
                name: 'Top 1',
                type: 'effectScatter',
                coordinateSystem: 'bmap',
                data: convertData(
                    data
                        .sort(function (a, b) {
                            return b.value - a.value;
                        })
                        .slice(0, 6)
                ),
                encode: {
                    value: 2
                },
                symbolSize: function (val) {
                    return val[2] / 10;
                },
                showEffectOn: 'emphasis',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    formatter: '{b}',
                    position: 'right',
                    show: true,
                    color: '#fff',
                    fontSize: '18'
                },
                itemStyle: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: '#333'
                },
                zlevel: 1
            },
            {
                type: 'custom',
                coordinateSystem: 'bmap',
                renderItem: renderItem,
                itemStyle: {
                    opacity: 0.5
                },
                animation: false,
                silent: true,
                data: [0],
                z: -10
            }
        ]
    };
    sang.setOption(option)
    option1 = {
        // title: {
        //     text: '折线图堆叠'
        // },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            top: '3%',
            data: ['常规式发电', '抽水式发电', '总和', '平均'],
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            top: '17%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1', '2', '3', '4', '5', '7', '8', '9', '10', '11', '12'],
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        series: [
            {
                name: '常规式发电',
                type: 'line',
                // stack: '总量',
                data: data1
            },
            {
                name: '抽水式发电',
                type: 'line',
                // stack: '总量',
                data: data2
            },
            {
                name: '总和',
                type: 'line',
                // stack: '总量',
                data: data3
            },
            {
                name: '平均',
                type: 'line',
                // stack: '总量',
                data: data4
            }
        ],
    };
    left1.setOption(option1);
    option3 = {
        legend: {},
        tooltip: {
            trigger: 'axis',
            showContent: false
        },
        dataset: {
            source: data6,
            textStyle: {
                color: '#fff'
            }
        },
        legend: {
            show: true,
            top: '5%',
            textStyle: {
                color: '#fff'
            }
        },
        xAxis: {
            gridIndex: 0,
            show: false,
        },
        yAxis: {
            gridIndex: 0,
            show: false,
        },
        grid: { top: '55%' },
        series: [
            {
                type: 'pie',
                id: 'pie',
                radius: '40%',
                left: '-2%',
                center: ['50%', '55%'],
                emphasis: {
                    focus: 'self'
                },
                label: {
                    formatter: '{b}: {d}%',
                    color: '#fff',
                },
            }
        ]
    };
    left3.setOption(option3);
    option4 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            textStyle: {
                color: '#fff'
            },
            top: '5%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['三天前', '前天', '昨天', '今天', '明天', '后天', '三天后'],
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        series: [
            {
                name: '预计产量',
                type: 'line',
                data: data7,
                lineStyle: { width: 3 }
            },
            {
                name: '实际产量',
                type: 'line',
                data: data8,
                lineStyle: { width: 3 }
            }
        ]
    };
    mid1.setOption(option4);
    option5 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            textStyle: {
                color: '#fff'
            },
            top: '5%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['三天前', '前天', '昨天', '今天', '明天', '后天', '三天后'],
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        series: [
            {
                name: '预计产量',
                type: 'line',
                data: data11,
                lineStyle: { width: 3 }
            },
            {
                name: '实际产量',
                type: 'line',
                data: data22,
                lineStyle: { width: 3 }
            }
        ]
    };
    mid2.setOption(option5);
    var series = [
        {
            data: data33,
            type: 'bar',
            barWidth: 20,
            stack: 'a',
            name: '常规式发电'
        },
        {
            data: data44,
            type: 'bar',
            stack: 'a',
            name: '抽水式发电'
        },
    ];
    const stackInfo = {};
    for (let i = 0; i < series[0].data.length; ++i) {
        for (let j = 0; j < series.length; ++j) {
            const stackName = series[j].stack;
            if (!stackName) {
                continue;
            }
            if (!stackInfo[stackName]) {
                stackInfo[stackName] = {
                    stackStart: [],
                    stackEnd: []
                };
            }
            const info = stackInfo[stackName];
            const data = series[j].data[i];
            if (data && data !== '-') {
                if (info.stackStart[i] == null) {
                    info.stackStart[i] = j;
                }
                info.stackEnd[i] = j;
            }
        }
    }
    for (let i = 0; i < series.length; ++i) {
        const data = series[i].data;
        const info = stackInfo[series[i].stack];
        for (let j = 0; j < series[i].data.length; ++j) {
            // const isStart = info.stackStart[j] === i;
            const isEnd = info.stackEnd[j] === i;
            const topBorder = isEnd ? 20 : 0;
            const bottomBorder = 0;
            data[j] = {
                value: data[j],
                itemStyle: {
                    borderRadius: [topBorder, topBorder, bottomBorder, bottomBorder]
                }
            };
        }
    }
    option6 = {
        legend: {
            data: ['常规式发电', '抽水式发电'],
            top: '5%',
            textStyle: {
                color: '#fff'
            },
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7'],
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        series: series
    };
    right1.setOption(option6);
    option7 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            textStyle: {
                color: '#fff'
            },
            top: '5%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        series: [
            {
                name: '光伏发电',
                type: 'line',
                data: data55,
            },
            {
                name: '水利发电',
                type: 'line',
                data: data66,
            },
            {
                name: '平均发电',
                type: 'line',
                data: data77,
            }
        ]
    };
    right2.setOption(option7);
    const dianji = document.querySelectorAll('.li1')
    for (let i = 0; i < dianji.length; i++) {
        dianji[i].addEventListener('click', function () {
            data1.splice(0, 12)
            data2.splice(0, 12)
            data3.splice(0, 12)
            data4.splice(0, 12)
            data6.splice(0, 4)
            data7.splice(0, 7)
            data8.splice(0, 4)
            data11.splice(0, 7)
            data22.splice(0, 4)
            data33.splice(0, 7)
            data44.splice(0, 7)
            data55.splice(0, 7)
            data66.splice(0, 7)
            data77.splice(0, 7)

            for (let j = 0; j < 12; j++) {
                data1.push(Math.round(Math.random() * 200));
                data2.push(Math.round(Math.random() * 200));
                data3.push((data1[j] + data2[j]))
                data4.push((data1[j] + data2[j]) / 2)
            }

            for (let i = 0; i < 4; i++) {

                data8.push(Math.round(Math.random() * 100));
                data22.push(Math.round(Math.random() * 100));
            }
            data6.push(['太阳辐射能量', Math.round(Math.random() * 100)]);
            data6.push(['温度特性', Math.round(Math.random() * 100)]);
            data6.push(['灰尘损失', Math.round(Math.random() * 100)]);
            data6.push(['其他', Math.round(Math.random() * 100)]);
            for (let i = 0; i < 7; i++) {
                data7.push(Math.round(Math.random() * 100));

                data11.push(Math.round(Math.random() * 100));

                data33.push(Math.round(Math.random() * 200));
                data44.push(Math.round(Math.random() * 200));
                data55.push(Math.round(Math.random() * 15));
                data66.push(Math.round(Math.random() * 15));
                data77.push((data55[i] + data66[i]) / 2)
            }
            left1.setOption(option1);
            // left2.setOption(option2);
            left3.setOption(option3);
            mid1.setOption(option4);
            mid2.setOption(option5);
            for (let i = 0; i < series[0].data.length; ++i) {
                for (let j = 0; j < series.length; ++j) {
                    const stackName = series[j].stack;
                    if (!stackName) {
                        continue;
                    }
                    if (!stackInfo[stackName]) {
                        stackInfo[stackName] = {
                            stackStart: [],
                            stackEnd: []
                        };
                    }
                    const info = stackInfo[stackName];
                    const data = series[j].data[i];
                    if (data && data !== '-') {
                        if (info.stackStart[i] == null) {
                            info.stackStart[i] = j;
                        }
                        info.stackEnd[i] = j;
                    }
                }
            }
            for (let i = 0; i < series.length; ++i) {
                const data = series[i].data;
                const info = stackInfo[series[i].stack];
                for (let j = 0; j < series[i].data.length; ++j) {
                    // const isStart = info.stackStart[j] === i;
                    const isEnd = info.stackEnd[j] === i;
                    const topBorder = isEnd ? 20 : 0;
                    const bottomBorder = 0;
                    data[j] = {
                        value: data[j],
                        itemStyle: {
                            borderRadius: [topBorder, topBorder, bottomBorder, bottomBorder]
                        }
                    };
                }
            }
            right1.setOption(option6);
            right2.setOption(option7);
        })
    }
    const biao = document.querySelector('.biaoxia')
    var res = -1;
    setInterval(function () {
        if (res == -555) {
            res = 0
        } else {
            biao.style.marginTop = res + 'px'
            res = res - 1;
        }
    }, 30)
    const sencheng = document.querySelector('.sencheng')
    const inp = document.querySelector('.inp')

    const active = document.querySelector('.active')

    const dianwo = document.querySelector('#last1')
    const jianyi = document.querySelector('.rili1')
    const guanbi = document.querySelector('.guanbi')
    dianwo.addEventListener('click', function () {
        jianyi.style.display = 'block'
        // inp.value = ''
        console.log(11);
    })
    sencheng.addEventListener('click', () => {
        if (inp.value == '') {
            alert('请输入问题')
        }
        else if (inp.value == '水流流速过快') {
            active.value = '请打开阀门'
            active.style.display = 'block'
        }
        else if (inp.value == '水流流速过慢') {
            active.value = '请关闭阀门'
            active.style.display = 'block'
        }
        else if (inp.value == '上流降雨量增加') {
            active.value = '请打开阀门'
            active.style.display = 'block'
        }
        else if (inp.value == '下游降雨量增加') {
            active.value = '请关闭阀门'
            active.style.display = 'block'
        }
        else {
            alert('抱歉，这个问题有点难呢')
            inp.value = ''
        }
    })
    guanbi.addEventListener('click', function () {
        inp.value = ''
        jianyi.style.display = 'none'
        active.style.display = 'none'
    })
</script>

</html>